<template>
  <page-meta :root-font-size="globalData.fontsize + 'px'" user-scalable="no" viewport-fit="cover" style="display: block"></page-meta>
  <view class="enhanceInfo h100p" :style="globalData.appStyle.mainStyle">
    <view :style="globalData.appStyle.navStyle">
      <uni-nav-bar :height="globalData.navBarInfo.height" backgroundColor="#FF7C00" color="#FFFFFF" title="完善信息" left-icon="left" @clickLeft="back" />
    </view>
    <view class="contentBox" :style="globalData.appStyle.contentStyle">
      <view class="contentWithFooter" :style="contentWithFooterStyle">
        <view v-show="formData.auditStatus === '3'" class="titleBox flc">
          <view class="title cYE f16">审核中...</view>
          <view class="content cGY2 f16">您提交的信息正在审核中，请耐心等待</view>
        </view>
        <view v-show="formData.auditStatus === '2'" class="titleBox flr">
          <view class="titleLeft flc">
            <view class="title cRD f16">未通过</view>
            <view class="content cGY2 f16">{{ formData.auditReason }}</view>
          </view>
          <view class="titleRight fle flcv">
            <view class="contrctService">联系客服</view>
          </view>
        </view>
        <view class="common_form" :class="{ formNoBorder: !formData.auditStatus || formData.auditStatus === '1' }">
          <view class="uniforms">
            <uni-forms ref="form" :modelValue="formData">
              <uni-forms-item label="公司名称" label-width="100px" name="contact">
                <view class="flr w100p h60">
                  <uni-combox :border="false" v-model="formData.enterpriseName" :candidates="enterpriseList" class="combox" placeholder="请填入公司名称" @input="getEnterpriseList" />
                </view>
              </uni-forms-item>
              <view class="content_line"></view>
              <CompletePayInfo :targetType="2" title="完善公司信息" descSecond="补充信息，更快成交" @setCompleteInfo="setCompleteInfo" :params="formData" />
              <view class="content_line"></view>
              <uni-forms-item label="企业类别" label-width="100px" name="contact">
                <view class="flr fla flb">
                  <uni-data-select v-model="formData.enterpriseCategory" :localdata="categoryRange" @change="categoryChange" class="categorySelect" placeholder="请输入企业类别" />
                </view>
              </uni-forms-item>
              <view class="content_line"></view>
              <uni-forms-item label="主要客户" label-width="100px" name="contact">
                <view class="flr fla flb">
                  <input type="text" v-model="formData.mainCustomer" placeholder="请输入主要客户" />
                </view>
              </uni-forms-item>
              <view class="content_line"></view>
              <uni-forms-item label="主营产品" label-width="100px" name="contact">
                <view class="flr fla flb">
                  <input type="text" v-model="formData.mainProduct" placeholder="请输入主营产品" />
                </view>
              </uni-forms-item>
              <view class="content_line"></view>
              <UploadFile uploadFileType="img" :picsUrl="formData.logoUrl" title="企业LOGO" :limit="1" @setFileInfo="getLogoUrl" />
              <view class="content_line"></view>
              <UploadFile uploadFileType="img" :picsUrl="formData.productPicsUrl" title="产品展示" :limit="4" @setFileInfo="getProductUrl" />
            </uni-forms>
          </view>
        </view>
      </view>
      <FixedBottomBtn v-if="showFixedBottom" @btnFun="submit" />
    </view>
  </view>
</template>
<script>
import commonMxins from '@/mixins/common.js';
const api = require('@/utils/request.js');
import UploadFile from '@/component/UploadFile.vue';
import FixedBottomBtn from '@/component/FixedBottomBtn.vue';
import CompletePayInfo from '@/component/CompletePayInfo.vue';
export default {
  mixins: [commonMxins],
  data() {
    return {
      showFixedBottom: true,
      commonFormStyle: '',
      formData: {
        auditStatus: '',
        logoUrl: '',
        productPicsUrl: '',
        enterpriseName: '',
        enterpriseCategory: '',
        mainProduct: '',
        productPicsUrl: '',
        duty: '',
        nature: '',
        yearAmount: ''
      },
      categoryRange: [],
      enterpriseList: [],
      keyWords2: ''
    };
  },
  components: { UploadFile, FixedBottomBtn, CompletePayInfo },
  created() {
    //68是按钮+外侧边框的高度
    this.commonFormStyle = `height: calc(100% - ${this.globalData.appStyle.safeBottom + 68}rem);overflow-y:auto;`;
  },
  async onLoad() {
    await this.getAllCategory();
    await this.getEnhanceInfo();
    this.getEnterpriseList();
  },
  methods: {
    onShareAppMessage(res) {
      return { title: 'E商机-商机触手可得', path: `/pages/procurementPage?shareId=${this.globalData.userInfo.id}` };
    },
    onShareTimeline(res) {
      return { title: 'E商机-商机触手可得', path: '/pages/procurementPage' };
    },
    async getEnterpriseList() {
      this.enterpriseList = [];
      let res = await api.request({ url: '/appUser/queryEnterpriseListBlur', data: { word: this.formData.enterpriseName }, method: 'GET' });
      res.data.forEach(el => this.enterpriseList.push(el.name));
      console.log(111, this.enterpriseList);
    },
    async getAllCategory() {
      let res = await api.request({ url: '/category/queryAll', data: {}, method: 'GET' });
      this.categoryRange = res.data.map(el => {
        el.value = el.id;
        el.text = el.categoryName;
        delete el.children;
        return el;
      });
      this.showFixedBottom = !this.formData.auditStatus || this.formData.auditStatus === '2';
    },
    async getEnhanceInfo() {
      let res = await api.request({ url: '/appUser/queryEnterpriseInfo', method: 'GET' });
      if (res.data) {
        let idx = this.categoryRange.findIndex(el => el.categoryName === res.data.enterpriseCategory);
        res.data.enterpriseCategory = this.categoryRange[idx].value;
        this.formData = { ...res.data };
        this.showFixedBottom = !this.formData.auditStatus || this.formData.auditStatus === '2';
        this.bottomHeightChange();
      }
    },
    // 配置完善信息字段
    setCompleteInfo(info) {
      if (Object.keys(info).length > 0) {
        this.formData = { ...this.formData, ...info };
      }
    },
    async submit() {
      if (this.formData.enterpriseName && this.formData.enterpriseCategory && this.formData.mainCustomer && this.formData.mainProduct && this.formData.logoUrl && this.formData.productPicsUrl) {
        let data = JSON.parse(JSON.stringify(this.formData));
        let idx = this.categoryRange.findIndex(el => el.id === this.formData.enterpriseCategory);
        data.enterpriseCategory = this.categoryRange[idx].text;
        let resp = await api.request({ url: '/appUser/submitEnterpriseApply', data });
        if (resp.code === 200) {
          uni.showToast({ title: '提交成功', icon: 'success', duration: 1500 });
          this.getEnhanceInfo();
        }
      } else {
        uni.showToast({ title: '请先填全信息', icon: 'none', duration: 1500 });
      }
    },
    getLogoUrl(url) {
      this.formData.logoUrl = url;
    },
    categoryChange(e) {},
    getProductUrl(url) {
      this.formData.productPicsUrl = url;
    }
  }
};
</script>
<style lang="scss" scoped>
.enhanceInfo {
  .contentBox {
    position: relative;
    .contentWithFooter {
      .titleBox {
        padding: 12rem;
        box-sizing: border-box;
        .titleLeft {
          width: 300rem;
        }
        .titleRight {
          width: calc(100% - 300rem);
          .contrctService {
            width: 88rem;
            height: 32rem;
            font-size: 14rem;
            text-align: center;
            line-height: 32rem;
            border-radius: 50rem;
            border: 1rem solid rgba(255, 124, 0, 1);
            color: rgba(255, 124, 0, 1);
          }
        }
        .title {
          line-height: 24rem;
        }
        .content {
          line-height: 24rem;
        }
      }
      .common_form /deep/ {
        overflow-y: auto;
        .uni-forms {
          border-top: 1rem solid #ff7c00;
          border-top-left-radius: 20rem;
          border-top-right-radius: 20rem;
          .uni-combox {
            padding: 0 !important;
          }
          .combox {
            line-height: 60rem;
            height: 60rem;
            padding-left: 20rem;
            width: 100%;
          }
        }
        .uni-forms-item {
          width: 402rem;
          padding: 0 14rem;
          height: 60rem;
          margin-bottom: 0;
        }
        .uni-forms-item__label {
          height: 60rem !important;
          font-size: 16rem !important;
          color: rgba(56, 56, 56, 1) !important;
          text-align: left;
          line-height: 60rem !important;
        }
        .uni-forms-item__content {
          input {
            height: 60rem;
            width: 100%;
          }
          .categorySelect {
            height: 60rem;
            width: 100%;
            padding: 12rem 0;
            box-sizing: border-box;
            .uni-select {
              padding-left: 0;
              border: none;
            }
          }
          .uni-icons {
            color: rgba(166, 166, 166, 1) !important;
          }
          text {
            font-size: 14rem;
            font-weight: 400;
            color: rgba(166, 166, 166, 1);
          }
        }
      }
      .formNoBorder /deep/ {
        .uni-forms {
          border-top: none;
        }
      }
      // 表单间距下划线
      .content_line {
        width: 430rem;
        height: 0rem;
        border-top: 1rem solid rgba(229, 229, 229, 1);
      }
    }
  }
}
</style>
